<template>
  <span class="loading-running">
    <svg class="icon loading-spinner " viewBox="0 0 24 24">
      <circle
          class="spinner-track"
          cx="12"
          cy="12"
          r="10"
          fill="none"
      />
      <circle
          class="spinner-fill"
          cx="12"
          cy="12"
          r="10"
          fill="none"
      />
    </svg>
  </span>
</template>

<style scoped>

.loading-spinner {
  animation: spin 0.8s linear infinite;
}

.spinner-track {
  stroke: transparent;
}

.spinner-fill {
  stroke-dasharray: 63;
  stroke-dashoffset: 63;
  animation: spinner-fill 1.4s ease-in-out infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes spinner-fill {
  0%, 100% {
    stroke-dashoffset: 63;
  }
  50% {
    stroke-dashoffset: 0;
  }
}
</style>